<template>
  <base-container>
    <div class="p-[24px] rounded-[12px] mb-16px content">
      <div class="flex items-center text-[18px] font-bold text-var(--ct1) mb-[24px]">
        <img alt="" class="w-[19px] h-[19px] mr-[10px]" src="../../assets/application/img_title_dot.png" />
        <text class="text-[18px]">短信概览</text>
      </div>
      <div class="flex gap-[24px] mb-[32px]">
        <!-- 营销短信卡片 -->
        <div class="sms-card flex-1">
          <div class="font-bold text-[18px] mb-[4px] text-[#222]">营销短信</div>
          <div class="text-[14px] text-[#888] mb-[24px]">主要用于各种营销场景的通知</div>
          <div class="flex justify-between">
            <div class="sms-stat">
              <div class="sms-stat-num">-</div>
              <div class="sms-stat-label">累计购买数量（条）</div>
            </div>
            <div class="sms-stat">
              <div class="sms-stat-num">{{ operatorSpendStatSmsInfo?.marketingTotal || "-" }}</div>
              <div class="sms-stat-label">累计消耗数量（条）</div>
            </div>
            <div class="sms-stat">
              <div class="sms-stat-num">-</div>
              <div class="sms-stat-label">当前剩余数量（条）</div>
            </div>
          </div>
        </div>
        <!-- 通知短信卡片 -->
        <div class="sms-card flex-1 bg1">
          <div class="font-bold text-[18px] mb-[4px] text-[#222]">通知短信</div>
          <div class="text-[14px] text-[#888] mb-[24px]">主要用于验证码、结果、状态等的通知</div>
          <div class="flex justify-between">
            <div class="sms-stat">
              <div class="sms-stat-num">-</div>
              <div class="sms-stat-label">累计购买数量（条）</div>
            </div>
            <div class="sms-stat">
              <div class="sms-stat-num">{{ operatorSpendStatSmsInfo?.noticeTotal || "-" }}</div>
              <div class="sms-stat-label">累计消耗数量（条）</div>
            </div>
            <div class="sms-stat">
              <div class="sms-stat-num">-</div>
              <div class="sms-stat-label">当前剩余数量（条）</div>
            </div>
          </div>
        </div>
      </div>
      <!--   TODO: 下一期实现该功能   -->
      <div class="flex justify-center">
        <el-button color="#5947F1" size="large" @click="buyVisible = true">立即购买</el-button>
      </div>
    </div>

    <base-table-card>
      <template #header-left>
        <!-- tabs 只绑定本地 tabStatus，不直接绑 searchParams -->
        <el-tabs v-model="tabStatus">
          <!--   TODO: 下一期实现该功能   -->
          <el-tab-pane label="购买记录" name="0" />
          <el-tab-pane label="消费记录" name="1" />
        </el-tabs>
      </template>

      <div v-if="tabStatus === '0'">
        <purchase-record></purchase-record>
      </div>
      <div v-if="tabStatus === '1'">
        <consumption-record></consumption-record>
      </div>
    </base-table-card>

    <!--  购买弹窗  -->
    <BaseDialog
      v-model="buyVisible"
      :confirm-text="confirmText"
      :show-cancel="false"
      :show-footer="true"
      :title="title"
      :width="width"
      @confirm="handleConfirm"
    >
      <div>
        <!-- 短信类型选择 -->
        <div class="buy-row mb-[24px] flex items-center">
          <span class="buy-label">短信类型</span>
          <el-radio-group v-model="smsType" class="ml-[16px]">
            <el-radio :label="'notice'">通知类短信</el-radio>
            <el-radio :label="'marketing'">营销类短信</el-radio>
          </el-radio-group>
        </div>
        <!-- 套餐选择 -->
        <div class="mb-[24px] flex items-center">
          <span class="buy-label">套餐选择</span>
          <div class="flex gap-[12px] mt-[8px] ml-15px">
            <div
              v-for="pkg in packages"
              :key="pkg.count"
              :class="{ selected: selectedPackage === pkg }"
              class="buy-package-card"
              @click="selectedPackage = pkg"
            >
              <div class="text-16px font-400 text-#494578">{{ pkg.count }}条</div>
              <div class="text-20px font-500 text-#5947F1">
                <span class="text-14px font-400">￥</span>{{ pkg.price }}
              </div>
              <div v-if="selectedPackage === pkg" class="pkg-check"></div>
            </div>
          </div>
        </div>
        <!-- 支付方式 -->
        <div class="buy-row flex items-center">
          <span class="buy-label">支付方式</span>
          <span class="ml-[16px] font-bold text-[#5947F1]">资金账户</span>
          <span class="ml-[8px] text-[#888]"
            >(余额：<span class="text-[#5947F1]">￥{{ accountBalance }}</span
            >)</span
          >
        </div>
      </div>
    </BaseDialog>
  </base-container>
</template>

<script setup>
  import { useUserInfoStore } from "@/store/modules/userInfo";
  import ConsumptionRecord from "./components/ConsumptionRecord.vue";
  import PurchaseRecord from "./components/PurchaseRecord.vue";

  const { userInfo } = useUserInfoStore();
  const tabStatus = ref("1");
  const operatorSpendStatSmsInfo = ref({});
  // 获取短信消费统计数据
  const loadGetOperatorSpendStatSms = async () => {
    const res = await Api.application.operatorSpendStatSms({ tenantId: userInfo.tenantId, serviceCategoryId: 4 });
    operatorSpendStatSmsInfo.value = res.data || {};
  };

  /** --------------- 购买功能模块 --------------- **/
  const buyVisible = ref(false);
  const title = ref("购买短信");
  const width = ref("648px");
  const confirmText = ref("确认购买");
  const handleConfirm = () => {
    buyVisible.value = false;
  };
  const smsType = ref("notice");
  const packages = ref([
    { count: 10000, price: 100 },
    { count: 25000, price: 200 },
    { count: 35000, price: 500 },
    { count: 65000, price: 999999 },
  ]);
  const selectedPackage = ref(packages.value[0]);
  const accountBalance = ref(19292);

  /** ------------------------------------------ **/

  onMounted(async () => {
    await loadGetOperatorSpendStatSms();
  });
</script>
<style lang="scss" scoped>
  .content {
    background: linear-gradient(175deg, var(--bd9) 2%, var(--fl7) 14%);
    border: 1px solid #ffffff;
  }
  .sms-card {
    border-radius: 8px;
    border-bottom: 1px solid var(---bd8, #ece4ff);
    background: linear-gradient(180deg, #f4f0ff 0%, #fff 28.37%);
    padding: 16px;
  }
  .bg1 {
    border-radius: 8px;
    border-bottom: 1px solid var(---lk8, #bae0ff);
    background: linear-gradient(180deg, #e6f4ff 0%, #fff 28.37%);
  }
  .sms-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sms-stat-num {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
  }
  .sms-stat-label {
    font-size: 14px;
    color: #888;
  }
  .buy-btn {
    background: #5c4cf5;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 12px 48px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .buy-btn:hover {
    background: #4736d7;
  }
  .buy-row {
    margin-bottom: 18px;
  }
  .buy-label {
    display: inline-block;
    color: #222;
    font-size: 16px;
  }
  .buy-package-card {
    min-width: 120px;
    min-height: 72px;
    background: #fafaff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition:
      border-color 0.2s,
      box-shadow 0.2s;
    border-radius: 8px;
    border: 1px solid var(---bd8, #ece4ff);
    background: linear-gradient(180deg, #f4f0ff 0%, #fff 28.37%);
  }
  .buy-package-card.selected {
    border-radius: 8px;
    border: 1px solid var(---bd, #5947f1);
    background: linear-gradient(180deg, #f4f0ff 0%, #fff 28.37%);
  }
  .pkg-price {
    font-size: 20px;
    font-weight: bold;
    color: #5947f1;
  }
  .pkg-check {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    background: url("@/assets/application/img_right_bottom_select.png") no-repeat center center;
    background-size: contain;
  }
</style>
